<template>
  <a-space size="large">
    <div v-for="(linkcategory, index) in linkcategories" :key="linkcategory.id" class="alllink">
      <a-select
        @select="onSelectLink"
        v-model:value="linkcategory.info.name"
        style="width: 200px"
        :fieldNames="{ label: 'name', value: 'name' }"
        :options="linkcategory.links"
        :placeholder="linkcategory.info.name"
        :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      />
    </div>

    <div v-for="(linkcategory, index) in linkcategories" :key="linkcategory.id" class="onelink">
      <a-select
        v-if="index == 0"
        @select="onSelectLink"
        v-model:value="linkcategory.info.name"
        style="width: 200px"
        :fieldNames="{ label: 'name', value: 'name' }"
        :options="linkcategory.links"
        :placeholder="linkcategory.info.name"
        :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      />
    </div>
  </a-space>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'CmsFooterLinkersComponent',
    props: {
      linkcategories: {},
    },
    setup(props) {
      const onSelectLink = (_value: any, option: { url: string | URL | undefined }) => {
        window.open(option.url);
      };

      return {
        onSelectLink,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';
  .onelink {
    display: none;
  }
  @media screen and (max-width: 576px) {
    .alllink {
      display: none;
    }
    .onelink {
      display: block;
    }
  }
</style>
